/**
 * @name Home
 * @description 首页
 * @name 方知有
 * @version 2020/06/05
 */

import React, { Component } from "react"
import SelectedTree from "./SelectedTree"
import styles from "./styles.module.less"

import { Tree ,Button,Input} from "antd"
const { TreeNode } = Tree
const treeData = [
  {
    id: "0-0",
    level: 1,
    name: "0-0",
    children: [
      { id: "0-0-0", level: 2, name: "0-0-0" },
      { id: "0-0-1", level: 2, name: "0-0-1" },
      { id: "0-0-2", level: 2, name: "0-0-2" },
      { id: "0-0-3", level: 2, name: "0-0-3" }
    ]
  },
  {
    id: "0-1",
    level: 1,
    name: "0-1",
    children: [
      { id: "0-1-0", level: 2, name: "0-1-0" },
      { id: "0-1-1", level: 2, name: "0-1-1" },
      { id: "0-1-2", level: 2, name: "0-1-2" },
      { id: "0-1-3", level: 2, name: "0-1-3" }
    ]
  },
  { id: "0-2", level: 1, name: "0-2", children: [] },
  {
    id: "0-3",
    level: 1,
    name: "0-3",
    children: [
      { id: "0-3-0", level: 2, name: "0-3-0" },
      { id: "0-3-1", level: 2, name: "0-3-1" },
      { id: "0-3-2", level: 2, name: "0-3-2" },
      { id: "0-3-3", level: 2, name: "0-3-3" }
    ]
  },
  { id: "0-4", level: 1, name: "0-4", children: [] },
  {
    id: "0-5",
    level: 1,
    name: "0-5",
    children: [
      { id: "0-5-0", level: 2, name: "0-5-0" },
      { id: "0-5-1", level: 2, name: "0-5-1" },
      { id: "0-5-2", level: 2, name: "0-5-2" },
      { id: "0-5-3", level: 2, name: "0-5-3" }
    ]
  }
]
class Home extends Component {
  state = {
    selectedId: [], //已选节点展示框使用
    checkedIds: [], //树节点渲染使用
    positions: [] //包含层级信息的节点数据
  }

  onChecked = (key, item) => {
    console.log("已选--第一级处理===", item)
    if (!item) {
      return
    }
    //已选集合
    const arr = item.checkedNodesPositions
    let children = [] //selectId
    let childrenKey = [] //checkedIds
    let ONELIST = []
    let TWOLIST = []
    let THREELIST = []
    let FOURLIST = []
    let FIVELIST = []
    let SIXLIST = []
    for (let i = 0; i < arr.length; i++) {
      let posLen = arr[i].pos.split("-").length - 1
      if (posLen === 1) {
        ONELIST.push(arr[i])
      } else if (posLen === 2) {
        TWOLIST.push(arr[i])
      } else if (posLen === 3) {
        THREELIST.push(arr[i])
      } else if (posLen === 4) {
        FOURLIST.push(arr[i])
      } else if (posLen === 5) {
        FIVELIST.push(arr[i])
      } else if (posLen === 6) {
        SIXLIST.push(arr[i])
      }
    }
    if (TWOLIST.length !== 0) {
      for (let m = 0; m < ONELIST.length; m++) {
        TWOLIST = TWOLIST.filter(v => v.pos.slice(0, 3) !== ONELIST[m].pos)
      }
    }
    if (THREELIST.length !== 0) {
      for (let n = 0; n < ONELIST.length; n++) {
        THREELIST = THREELIST.filter(v => v.pos.slice(0, 3) !== ONELIST[n].pos)
      }
      for (let n1 = 0; n1 < TWOLIST.length; n1++) {
        THREELIST = THREELIST.filter(v => v.pos.slice(0, 5) !== TWOLIST[n1].pos)
      }
    }
    if (FOURLIST.length !== 0) {
      for (let p = 0; p < ONELIST.length; p++) {
        FOURLIST = FOURLIST.filter(v => v.pos.slice(0, 3) !== ONELIST[p].pos)
      }
      for (let p1 = 0; p1 < TWOLIST.length; p1++) {
        FOURLIST = FOURLIST.filter(v => v.pos.slice(0, 5) !== TWOLIST[p1].pos)
      }
      for (let p2 = 0; p2 < THREELIST.length; p2++) {
        FOURLIST = FOURLIST.filter(v => v.pos.slice(0, 7) !== THREELIST[p2].pos)
      }
    }
    if (FIVELIST.length !== 0) {
      for (let q = 0; q < ONELIST.length; q++) {
        FIVELIST = FIVELIST.filter(v => v.pos.slice(0, 3) !== ONELIST[q].pos)
      }
      for (let q1 = 0; q1 < TWOLIST.length; q1++) {
        FIVELIST = FIVELIST.filter(v => v.pos.slice(0, 5) !== TWOLIST[q1].pos)
      }
      for (let q2 = 0; q2 < THREELIST.length; q2++) {
        FIVELIST = FIVELIST.filter(v => v.pos.slice(0, 7) !== THREELIST[q2].pos)
      }
      for (let q3 = 0; q3 < FOURLIST.length; q3++) {
        FIVELIST = FIVELIST.filter(v => v.pos.slice(0, 9) !== FOURLIST[q3].pos)
      }
    }
    if (SIXLIST.length !== 0) {
      for (let r = 0; r < ONELIST.length; r++) {
        FIVELIST = FIVELIST.filter(v => v.pos.slice(0, 3) !== ONELIST[r].pos)
      }
      for (let r1 = 0; r1 < TWOLIST.length; r1++) {
        FIVELIST = FIVELIST.filter(v => v.pos.slice(0, 5) !== TWOLIST[r1].pos)
      }
      for (let r2 = 0; r2 < THREELIST.length; r2++) {
        FIVELIST = FIVELIST.filter(v => v.pos.slice(0, 7) !== THREELIST[r2].pos)
      }
      for (let r3 = 0; r3 < FOURLIST.length; r3++) {
        FIVELIST = FIVELIST.filter(v => v.pos.slice(0, 9) !== FOURLIST[r3].pos)
      }
      for (let r4 = 0; r4 < FIVELIST.length; r4++) {
        SIXLIST = SIXLIST.filter(v => v.pos.slice(0, 11) !== FIVELIST[r4].pos)
      }
    }
    children = ONELIST.concat(TWOLIST, THREELIST, FOURLIST, FIVELIST, SIXLIST)

    childrenKey = children.length > 0 ? children.map(v => v.node.key) : []
    console.log("onChecked===end", children, childrenKey)
    this.setState({ selectedId: children, checkedIds: childrenKey, positions: arr })
  }

  //TreeNode-树结构
  renderTreeNodes = data => {
    return data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.name} key={item.id} isLeaf={!item.children} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        )
      }
      return <TreeNode key={item.id} title={item.name} isLeaf={!item.children} dataRef={item} />
    })
  }
  //onDelete删除已选
  onDelete = val => {
    let selecteds = this.state.selectedId
    if (val === -1) {
      this.setState({ selectedId: [], checkedIds: [] })
    } else {
      let arrs = selecteds.filter(v => v.pos !== val.pos)
      if (arrs.length > 0) {
        let checks = arrs.map(v => v.node.key)
        this.setState({ selectedId: arrs, checkedIds: checks })
      } else {
        this.setState({ selectedId: [], checkedIds: [] })
      }
    }
  }

  render() {
    const { selectedId, checkedIds } = this.state
    return (
      <div style={{ width: 500, margin: "0 auto" }}>
      <Button type="primary">111</Button>
      <Input defaultValue="1458"/>
        暂时支持六层嵌套结构
        {/**已选树节点 */}
        <SelectedTree data={selectedId} onDel={this.onDelete} />
        {/**树 */}
        <div className={styles.article_selector_wrap}>
          <Tree checkable selectable={false} autoExpandParent={false} onCheck={(key, item) => this.onChecked(key, item)} checkedKeys={checkedIds}>
            {this.renderTreeNodes(treeData)}
          </Tree>
        </div>
      </div>
    )
  }
}

export default Home
